<template>
  <div class="shop-wrapper">
    <!-- 搜索框 -->
    <page-header :configPageHeader="configPageHeader" @pageBack="pageBack" ref="pageHeader">
      <form action="/">
        <van-search
          v-model="searchValue"
          clearable
          shape="round"
          placeholder="请输入商品名称搜索"
          @search="onSearch"
        />
      </form>
    </page-header>
    <div class="shop-content-wrapper">
      <!-- 商家 -->
      <div class="shop-introduce" ref="shopIntroduce">
        <Piclist
          :shopList="shopList"
          v-if="shopList.list && shopList.list.length > 0"
          :isShowPic="isShowPic"
        >
        </Piclist>
      </div>

      <div
        class="shop-commodity-content"
        ref="commodityContent"
        :style="{ height: cntHeight + 'px' }"
      >
        <!-- 侧边 -->
        <div class="shop-content-sideBar">
          <van-sidebar v-model="sideBarActive" @change="siderChange">
            <van-sidebar-item :title="item.title" v-for="item in sidebarList" />
          </van-sidebar>
        </div>
        <!-- 右边内容 -->
        <div class="outer-container" :style="{ height: cntHeight + 'px' }">
          <div class="commodityList-content">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <van-cell v-for="item in list" :key="item" :title="item" />
              </van-list>
            </van-pull-refresh>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import PageHeader from '@comp/pageHeader/index.vue'
import Piclist from '@comp/pictextList/index.vue'
import { defineComponent, reactive, toRefs, ref, onMounted, nextTick, h } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { IGlobalState } from '@/store'
export default defineComponent({
  components: {
    PageHeader,
    Piclist,
  },
  setup() {
    const router = useRouter()
    let store = useStore<IGlobalState>()
    // 页面 返回
    const pageBack = () => {
      router.go(-1)
    }
    const shopData = reactive({
      searchValue: '',
      sideBarActive: 0,
      configPageHeader: {
        isUserDefined: true,
      },
      sidebarList: [
        {
          code: 0,
          title: '全部商品',
        },
        {
          code: 1,
          title: '秒杀',
        },
        {
          code: 2,
          title: '新鲜水果',
        },
        {
          code: 3,
          title: '休闲食品',
        },
        {
          code: 4,
          title: '时令蔬菜',
        },
        {
          code: 5,
          title: '肉蛋家禽',
        },
        {
          code: 6,
          title: '休闲食品',
        },
        {
          code: 7,
          title: '时令蔬菜',
        },
        {
          code: 8,
          title: '肉蛋家禽',
        },
      ],
      isShowPic: false,
      pageHeight: 0,
      shopList: {
        hasMore: true, //有没有更多数据
        loading: false, //默认没有正在加载
        offset: 0,
        limit: 5,
        list: [
          {
            shopLogo:
              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0628%2Ff0d3e040p00qve7cd000ec000gk00gkm.png%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655876666&t=18d2a4fac2658d12020092f3d94e9b1a',
            shopname: '沃尔玛',
            saleroom: '1万',
            sendStartMoney: 0,
            freight: 5,
            activity: 'VIP尊享满89元减4元运费券（每月3张）',
          },
        ],
      },
      cntHeight: 0,
    })
    //搜索
    const onSearch = () => {}
    // sider切换
    const siderChange = (index: number) => {}

    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)
    //上啦加载
    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = []
          refreshing.value = false
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1)
        }
        loading.value = false

        if (list.value.length >= 40) {
          finished.value = true
        }
      }, 1000)
    }
    //下啦刷新
    const onRefresh = () => {
      // 清空列表数据
      finished.value = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      onLoad()
    }

    const pageHeader = ref<HTMLElement | null>(null)
    const shopIntroduce = ref<HTMLElement | null>(null)
    const commodityContent = ref<HTMLElement | null>(null)

    // const testRef =  ref<HTMLElement | null>(null)
    // const loading = ref(false)
    onMounted(() => {
      nextTick(() => {
        //获取页面高度
        shopData.pageHeight = document.documentElement.clientHeight
        const headerHeight = pageHeader.value?.$el.offsetHeight
        const introduceHeight: (number | undefined )= shopIntroduce.value?.clientHeight
        shopData.cntHeight = shopData.pageHeight - headerHeight - introduceHeight - 45

        //	contHeight = commodityContent.value?.style.height
      })
    })

    return {
      pageHeader,
      shopIntroduce,
      commodityContent,
      pageBack,
      onSearch,
      siderChange,
      ...toRefs(shopData),
      list,
      onLoad,
      loading,
      finished,
      onRefresh,
      refreshing,
    }
  },
})
</script>
<style scoped lang="scss">
@import '@/styles/viriables.scss';
@import '@/styles/mixins.scss';
.shop-content-wrapper {
  margin-top: 35px;
  background-color: #ffffff;
  width: 100%;
  overflow: hidden;
  .shop-introduce {
    padding: 15px;
    @include thinBorder();
  }
  .shop-commodity-content {
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
    .shop-content-sideBar {
      overflow-y: scroll;
      flex: 0 0 80px;
    }
    .outer-container {
      width: 100%;
      box-sizing: border-box;
      padding: 15px;
      position: relative;
      overflow: hidden;
      .commodityList-content {
        position: absolute;
        left: 0;
        top: 0;
        right:0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: scroll;
      }
    }
  }
}
</style>
